<template>
  <view class="page">
    <!-- 自定义头部 start -->
    <fu-custom bgColor="bg-white" :isBack="false"><block slot="content">{{i18n['登录']}}</block></fu-custom>
    <!-- 自定义头部 end -->
    <view class="solid-top">
      <!-- 关闭 -->
      <view class="text-right text-df padding" @tap="cancle">
       {{ i18n['跳过，看好物']}}
        <text class="cuIcon-right"></text>
      </view>
      <!-- logo -->
      <view class="header"><image :src="logo"></image></view>
      <view class="content">
        <view>{{i18n['申请获取以下权限']}}</view>
        <text>{{i18n['获得你的公开信息(昵称，头像、地区等)']}}</text>
      </view>
      <button v-if="canIUseGetUserProfile" class="bottom bg-white" @click="wxGetUserProfile">
       快捷登录
      </button>
      <button v-else class="bottom bg-white" type="" open-type="getUserInfo" withCredentials="true" lang="zh_CN" @getuserinfo="wxGetUserInfo">
       快捷登录
      </button>
    </view>
	<!-- 设置资料弹窗 start -->
	<fu-popup v-model="isShow" mode="bottom" border-radius="16" :mask-close-able="true">
	  <view class="userinfo-box">
	    <view class="title">完善个人资料</view>
		<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar" style="padding: 0;">
		  <image class="avatar" :src="avatarUrl"></image>
		</button> 
		<view class="flex align-center  padding-lr name-input">
			<span class="text-bold text-df text-black">昵称</span>
				<input type="nickname" class="weui-input margin-left-xl" v-model="nickName"  placeholder="请输入昵称"/>
		</view>
		<button class="bottom bg-green text-white"  type="primary" @click="nextStep"  style="background:#39b54a;color: #FFFFFF;">
		 下一步
		</button>
		<!-- 协议同意 start -->
		<!-- <view class="flex align-center justify-center text-666 fu-fs24 margin-top bookfooter">
			<image class="width-30 height-30 margin-right-xs" @click="handle_select" v-if="is_select_agree" src="../../static/checked.png"></image>
			<image class="width-30 height-30 margin-right-xs" @click="handle_select" v-else src="../../static/unchecked.png"></image>
			<view>
				{{ i18n['已阅读并同意'] }}
				<text class="text-theme text-bold" @tap="handleJump" data-url="/pages/user/login/user-agreement/index?id=14">《用户协议》</text>
				{{ i18n['与'] }}
				<text class="text-theme text-bold" @tap="handleJump" data-url="/pages/user/login/user-agreement/index?id=13">{{ i18n['《隐私政策》'] }}</text>
			</view>
		</view> -->
		<!-- 协议同意 end -->
	  </view>
	</fu-popup>
	<!-- 设置资料弹窗 end -->
  </view>
</template>

<script>
// 引入上传图片公共方法
import { UploadImage } from '@/common/utils/index';
export default {
  data() {
    return {
	  is_select_agree: false,
	  isShow:false,
	  avatarUrl: 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0',
	  code: '',
	  $IMGBASEURL:this.$IMGBASEURL,
	  nickName:'',
      logo: global.SYSTEM_CONFIG.logo, // logo图路径
      canIUseGetUserProfile: false ,// 是否支持新版的微信登录API
	  Wxinfo_tmp:{}, //微信授权信息
    };
  },
  /**
   * @description 新增内容
   * @description 判断当前微信版本是否支持新版微信登录接口
   * @author 默默
   * */
  onLoad() {
    if (wx.getUserProfile) {
      this.canIUseGetUserProfile = true;
    }
  },
  methods: {
    // 取消登录
    cancle() {
      uni.navigateBack();
    },
	/**
	 * @param 是否选择同意协议
	 */
	handle_select() {
		this.is_select_agree = !this.is_select_agree;
	},
    // 新版微信登录接口
    wxGetUserProfile() {
      uni.showLoading({
        title: this.i18n['登录中...']
      });
      let code = '';
      uni.login({
        success: res => {
          code = res.code;
		  // 请求登录接口
		  this.$api
		    .post(global.apiUrls.postMiniparamLogin, {
		      code: code
		    })
		    .then(result => {
		      result = result.data;
		      console.log('后台返回登录信息', result);
		      if (result.code == 1) {
		        uni.hideLoading();
		        this.$store.commit('updateUserInfo', result.data.userinfo);
		        uni.navigateBack();
		      } else if (result.code == -999) {
				uni.hideLoading();
		        // 服务器解析参数错误
		       this.Wxinfo_tmp = result.data.result
		       setTimeout(()=> {
		       	this.isShow = true
		       }, 200);
		      } else {
		        uni.hideLoading();
		        this.$message.info('授权失败，请使用其他方式登录');
		      }
		    })
		    .catch(err => {
		      console.log('ERROR', err);
		      uni.hideLoading();
		      this.$message.info(err.msg);
		    });
        }
      })
      // wx.getUserProfile({
      //   desc: '用于完善会员资料',
      //   success: infoRes => {
      //     console.log('infoRes', infoRes);
      //     // 允许授权用户登录
      //     // 请求登录接口
      //     this.$api
      //       .post(global.apiUrls.postMiniparamLogin, {
      //         encryptedData: encodeURIComponent(infoRes.encryptedData),
      //         iv: encodeURIComponent(infoRes.iv),
      //         code: code
      //       })
      //       .then(result => {
      //         result = result.data;
      //         console.log('后台返回登录信息', result);
      //         if (result.code == 1) {
      //           uni.hideLoading();
      //           // 如果后台返回来的是 result 字段,表示此账号还没有绑定过手机号 跳转到绑定手机号页面
      //           // 如果后台返回的是 userinfo 字段,表示已经登录成功,把用户信息存到 store 中,并返回跳转来的页面
      //           if (result.data.result) {
      //             uni.setStorageSync('Wxinfo_tmp', result.data.result);
      //             setTimeout(function() {
      //               uni.redirectTo({
      //                 url: '/pages/user/login/auth-phone/index'
      //               });
      //             }, 500);
      //           } else if (result.data.userinfo) {
      //             this.$store.commit('updateUserInfo', result.data.userinfo);
      //             uni.navigateBack();
      //           }
      //         } else if (result.code == -999) {
      //           // 服务器解析参数错误
      //           uni.hideLoading();
      //           this.$message.info(result.msg);
      //         } else {
      //           uni.hideLoading();
      //           this.$message.info('授权失败，请使用其他方式登录');
      //         }
      //       })
      //       .catch(err => {
      //         console.log('ERROR', err);
      //         uni.hideLoading();
      //         this.$message.info(err.msg);
      //       });
      //   },
      //   fail: err => {
      //     console.log('ERROR', err);
      //     uni.hideLoading();
      //   }
      // });
    },
	// 下一步
	nextStep(){
		if(!this.avatarUrl){
			this.$message.error('请先选择头像');
			return false;
		}
		if(!this.nickName){
			this.$message.error('请输入昵称');
			return false;
		}
		// if (!this.is_select_agree) return this.$message.info(this.i18n['请阅读并勾选页面协议']);
		const Wxinfo =  this.Wxinfo_tmp;
		Wxinfo.avatarUrl = this.avatarUrl;
		Wxinfo.nickName = this.nickName;
		uni.setStorageSync('Wxinfo_tmp',Wxinfo);
		setTimeout(()=> {
		  uni.redirectTo({
		    url: '/pages/user/login/auth-phone/index'
		  });
		}, 500);
	},
	// 选择头像
	onChooseAvatar(e){
		// 开始上传
		let _this = this;
		let arr = new Array
		arr.push(e.detail.avatarUrl)
		new UploadImage(arr, {
		  complete: function(res) {
		    console.log(res);
		    // 上传成功 返回数据格式为数组 [ { id: '', path: '' } ]
			_this.avatarUrl = res[0].path
		  }
		});
	},
    // 旧版微信登录接口
    wxGetUserInfo(e) {
      uni.showLoading({
        title: this.i18n['登录中...']
      });
      uni.login({
        success: res => {
          const code = res.code;
          uni.getUserInfo({
            provider: 'weixin',
            success: infoRes => {
              console.log('infoRes', infoRes);
              // 允许授权用户登录
              // 请求登录接口
              this.$api
                .post(global.apiUrls.postMiniparamLogin, {
                  encryptedData: encodeURIComponent(infoRes.encryptedData),
                  iv: encodeURIComponent(infoRes.iv),
                  code: code
                })
                .then(result => {
                  result = result.data;
                  console.log('后台返回登录信息', result);
                  if (result.code == 1) {
                    uni.hideLoading();
                    // 如果后台返回来的是 result 字段,表示此账号还没有绑定过手机号 跳转到绑定手机号页面
                    // 如果后台返回的是 userinfo 字段,表示已经登录成功,把用户信息存到 store 中,并返回跳转来的页面
                    if (result.data.result) {
                      uni.setStorageSync('Wxinfo_tmp', result.data.result);
                      setTimeout(function() {
                        uni.redirectTo({
                          url: '/pages/user/login/auth-phone/index'
                        });
                      }, 500);
                    } else if (result.data.userinfo) {
                      this.$store.commit('updateUserInfo', result.data.userinfo);
                      uni.navigateBack();
                    }
                  } else if (result.code == -999) {
                    // 服务器解析参数错误
                    uni.hideLoading();
                    this.$message.info(result.msg);
                  } else {
                    uni.hideLoading();
                    this.$message.info(this.i18n['授权失败，请使用其他方式登录']);
                  }
                })
                .catch(err => {
                  console.log('ERROR', err);
                  uni.hideLoading();
                  this.$message.info(err.msg);
                });
            },
            fail: err => {
              console.log('ERROR', err);
              this.$message.info(this.i18n['获取用户授权失败']);
              uni.hideLoading();
            }
          });
        },
        fail: err => {
          console.log('ERROR', err);
          uni.hideLoading();
        }
      });
    },
    // 去查看用户隐私协议
    navto(id) {
      this.$urouter.navigateTo({
        url: '/pages/user/login/user-agreement/index',
        params: {
          id: id
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
// 页面样式 start
.page {
  min-height: 100vh;
  background: #fff;
}
// 页面样式 end
.bookfooter{
	padding-bottom: 50rpx;
	padding-bottom: calc(50rpx + constant(safe-area-inset-bottom));
	padding-bottom: calc(50rpx + env(safe-area-inset-bottom));
}
.userinfo-box{
    background-color: #FFFFFF;
    .title{
      height: 100rpx;
      line-height: 100rpx;
      text-align: center;
      font-size: 32rpx;
      color: #333333;
    }
    .avatar-wrapper{
    	width: 120rpx;
    	height: 120rpx;
    	margin: 80rpx auto;
    	image{
    		width: 120rpx;
    		height: 120rpx;
    	}
    }
    .name-input{
    	padding: 30rpx;
    	border-top:1px solid #eeeeee ;
    	border-bottom:1px solid #eeeeee ;
    }
    .weui-input{
    	border-radius: 12rpx;
    	font-size: 28rpx;
    }
}
// logo样式 start
.header {
  height: 400rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  image {
    width: 200rpx;
    height: 200rpx;
	box-shadow: 3px 3px 6px 4px #CCCCCC;
	border-radius: 16rpx;
  }
}
// logo样式 end

// 内容区 start
.content {
  margin-left: 50rpx;
  margin-bottom: 90rpx;
}
.content text {
  display: block;
  color: #9d9d9d;
  margin-top: 40rpx;
}
// 内容区 end

// 底部说明 start
.bottom {
  border-radius: 40rpx;
  margin: 70rpx 50rpx;
  font-size: 30rpx;
  border: 2rpx solid #39b54a;
  color: #39b54a;

  image {
    width: 49rpx;
    height: 40rpx;
    vertical-align: middle;
  }
}
.bottom::after {
  display: none;
}
.alink {
  color: $fu-type-primary-dark;
  text-decoration: underline;
}
// 底部说明 end
</style>
